﻿<!DOCTYPE html>
<html>
	<head>
		<title>ScrumBoard.net</title>
        <link href="css/universal.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui-1.8.14.min.js" type="text/javascript"></script>
        <script src="Scripts/scrumboard.js" type="text/javascript"></script>
	</head>
	<body onload="resizePhases();">
        
		<div id="navigation"> 
			<ul>
                <li><span id="navigationtitle" onclick="alert(document.getElementById('phase1').offsetHeight);">ScrumBoard.net</span></li>
				<li>
					Sprint
					<select>
					  <option value="Sprint 1">Sprint 1</option>
					  <option value="Sprint 2">Sprint 2</option>
					  <option value="Sprint 3">Sprint 3</option>
					  <option value="Sprint 4">Sprint 4</option>
					</select>
				</li>
				<li><a href="#">Product Backlog</a></li>
				<li><a href="#">Project Details</a></li>
				<li id="status"></li>
			</ul>
		</div>
        
        
		<div id="phases">
			<div class="phase phaseodd ui-droppable">
                <div id="phase1">
				    <div class="phasetitle">Planned<br /><hr /></div>
				    
				    <div class="story">
                        <div class="storyheader">#1 - Tilføj en bruger</div>
                        <div class="storycontent">Tilføj en bruger</div>
                        <div class="storyfooter">Owner: DK</div>
                    </div>
				    <div class="story">
                        <div class="storyheader">#2 - Tilføj en bruger</div>
                        <div class="storycontent">Tilføj en bruger</div>
                        <div class="storyfooter">Owner: DK</div>
                    </div>
				    <div class="story">
                        <div class="storyheader">#3 - Tilføj en bruger</div>
                        <div class="storycontent">Tilføj en bruger</div>
                        <div class="storyfooter">Owner: DK</div>
                    </div>
                </div>
			</div>
			<div class="phase phaseeven">
				<div id="phase2">
                    <div class="phasetitle">In Progress<br /><hr /></div>
                </div>
			</div>
			<div class="phase phaseodd">
				<div id="phase3">
                    <div class="phasetitle">Testing<br /><hr /></div>
				    <div class="story">
                        <div class="storyheader">#4 - Tilføj en bruger</div>
                        <div class="storycontent">Tilføj en bruger</div>
                        <div class="storyfooter">Owner: DK</div>
                    </div>
				    <div class="story">
                        <div class="storyheader">#4 - Tilføj en bruger</div>
                        <div class="storycontent">Tilføj en bruger</div>
                        <div class="storyfooter">Owner: DK</div>
                    </div>
                </div>
			</div>
			<div class="phase phaseeven">
				<div id="phase4">
                    <div class="phasetitle">Awaiting Approval<br /><hr /></div>
                </div>
			</div>
			<div class="phase phaseodd">
				<div id="phase5">
                    <div class="phasetitle">Done<br /><hr /></div>
                </div>
			</div>
		</div>

        
        <div id="infocontainer">
            <div id="infobar" onmousedown="showHideInfoarea();">
                <div id="infobartooltipleft"> ▲ open</div>
                <div id="infobartooltipright">open ▲</div>
            </div>
            <div id="infoarea">
                <div id="infoareaelementcontainer">
                    <div id="productbacklog" class="infoareaelement">
                        <div class="infoareaheader">Product Backlog</div>
                        <select name="misctasks" multiple > 
                            <option value="1" >Task 1</option>
                            <option value="1" >Task 2</option>
                            <option value="1" >Task 3</option>
                        </select>
                    </div>
                    <div id="misctasks" class="infoareaelement">
                        <div class="infoareaheader">Miscellaneous Tasks</div>
                        <select name="misctasks" multiple > 
                            <option value="1" >Task 1</option>
                            <option value="1" >Task 2</option>
                            <option value="1" >Task 3</option>
                        </select>
                    </div>
                    <div id="empidiments" class="infoareaelement">
                        <div class="infoareaheader">Empidiments</div>
                        <select name="misctasks" multiple > 
                            <option value="1" >Task 1</option>
                            <option value="1" >Task 2</option>
                            <option value="1" >Task 3</option>
                        </select>
                    </div>
                    <div id="burndownsprint" class="infoareaelement">
                        <div class="infoareaheader">Burndown Chart: Sprint</div>
                        <img src="images/burndown.png" height="170" width="215"/>
                    </div>
                    <div id="burndownproject" class="infoareaelement">
                        <div class="infoareaheader">Burndown Chart: Project</div>
                        <img src="images/burndown.png" height="170" width="215"/>
                    </div>
                </div>
            </div>
        </div>
	</body>
</html>